<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../lib/date.format-master/date.format.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css"/>
	</head>
	<body>
		<div id="app">

			<div class="panel panel-primary">
			  <div class="panel-heading">
			    <h3 class="panel-title">添加品牌</h3>
			  </div>
			  <!--form-inline 文本框不再独占一行 -->
			  <div class="panel-body form-inline">
				<label>Id:
					<input type="text" class="form-control" v-model="id"/>
				</label>
				<label>Name:
				<!-- 按键修饰符 .enter .tab .delet .esc .space .up.... -->
					<!-- <input type="text" class="form-control" v-model="name" @keyup.enter="add()"/> -->
					<!-- 也可以使用键盘码值keycode -->
					<!-- <input type="text" class="form-control" v-model="name" @keyup.13="add()"/> -->
					<!-- 自定义的全局修饰符 -->
					<input type="text" class="form-control" v-model="name" @keyup.f2="add()"/>
				</label>
				
				<input type="button" value="添加" class="btn btn-primary" @click="add()"/>
				
				<label>搜索名称关键字:
				<!-- Vue中所有的指令，在调用的时候，都以v-开头 -->
				<!-- 注意这里的v-color是两个引号 -->
					<input type="text" class="form-control" v-model="keywords"  v-focus v-color = "'red'" v-font-weight = "900" v-font-size = "'20px'"/>
				</label>
			  </div>
			</div>
			
			<table class="table table-striped table-hover table-bordered" >
				<thead>
					<tr>
						<th>Id</th>
						<th>Name</th>
						<th>Ctime</th>
						<th>Operation</th>
					</tr>
				</thead>
				<!-- 之前，v-for都是直接从data上的list渲染出来的 -->
				<!-- 现在通过search方法 ，通过for循环，把所有符合搜索关键字的保存在新数组中返回-->
					<tr v-for="item in search(keywords)" :key="item.id" >
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.ctime | dataFormat}}</td>
						<td>
							<!-- 通过item.id传参，根据id删除数据 -->
							<a href="" @click.prevent="delet(item.id)">删除</a>
						</td>
						
					</tr>
					
					
	
					
					
			
			</table>
			<h1 id="list" >{{list}}</h1>
		</div>
		
		<div id="app2">
			<h3>{{time | dataFormat}}</h3>
		</div>
		
		<script type="text/javascript">
			/* 定义全局过滤器，进行实践的格式化 */
			/* 全局过滤器：所有VM实例都共享 */
			/* Vue.filter('dataFormat',function(dateStr,pattern = ""){
				/* 根据给定字符串，得到特定时间 
				var dt = new Date(dateStr);
				var y = dt.getFullYear();
				var m = dt.getMonth() + 1;
				var d = dt.getDate();
				
			
				
				if(pattern.toLowerCase() === 'yyyy-mm-dd'){
					return `${y}-${m}-${d}`;
				}else{
					var hh = dt.getHours();
					var mm = dt.getMinutes();
					var ss = dt.getSeconds();
					return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
				}
			}); */
			
			/* 自定义全局按键修饰符 */
			Vue.config.keyCodes.f2 =13;
			
			/* 自定义全局指令 使用Vue.directive()*/
			/* 其中：参数1：指令的名称，不需要加v-前缀，但是调用的时候必须加v-前缀调用 */
			/* 参数2：是一个对象，有一些指令相关的函数，这些函数可以在特定的阶段执行相关操作 */
			/* 指令定义函数提供了几个钩子函数 */
			/* 1、bind 只调用一次，指令第一次绑定到元素时调用 */
			/* 2、inserted 被绑定元素插入父节点时调用*/
			/* 3、updated 所在组件VNode更新时调用*/
			/* 4、componentUpdated  所在组件VNode及其孩子的VNode全部更新时调用*/
			/* 5、unbind */
			Vue.directive('focus',{
				bind:function(el){
					/* 注意每个函数中第一个参数永远是el，表示被绑定的指令的那个元素，el是原生的JS对象 */
					/* 在函数刚绑定指令的时候，还没有插入到DOM中去，这时候调用focus没有作用 */
					el.focus();
					//alert('刚绑定');
				},
				inserted:function(el){/* 元素插入到DOM中 触发一次*/
					el.focus();
				},
				updated:function(el){/* 多次 */
					alert('更新')
				}
			})
			
			let that;
			var vm = new Vue({
				el:'#app',
				data:{
					id:'',
					name:'',
					keywords:'',
					
					list:[
						{id: 1,name: '奔驰',ctime: 	new Date()},
						{id: 2,name: '宝马',ctime: new Date()},
					]
				},
				methods:{
					add(){
						
						var res = this.list.some(item => {
							
							if(item.id == this.id || this.id == ''  || this.name == ''){
								return true;
							}
							
						
						})
						
						if(!res){
							/* 没有用key，只记住索引，会有bug */
							 this.list.push({id: this.id, name: this.name, ctime: new Date()}) ;
							/* this.list.push({id:this.id,name:this.name}) */
							this.id = this.name = '';
						}
						
					},
					
					delet(id){
						/* 1、如何根据id找到删除对象索引 */
						/* 2、直接调用数组的splice方法删除 */
						/* 通过some循环找到索引 */
						/* this.list.some((item,i)=>{
							if(item.id == id){
								this.list.splice(i,1);
								return true;
							}
						}) */
						/* 通过findindex找到索引 */
						var index = this.list.findIndex(item=>{
							if(item.id == id){
								return true;
							}
						})
						
						this.list.splice(index,1);
					},
					/* 根据关键字进行数据搜索 */
					search(keywords){
						/*var newlist = [];
						 this.list.forEach(item=>{
							console.log(keywords);
							if(item.name.indexOf(keywords) != -1){
								newlist.push(item);
							}
						})
						return newlist; */
						//注意 foreach some filter过滤查询到的形成新数组 findindex都是数组新方法，都会遍历
						
						var newlist = this.list.filter(item=>{
							//if(item.name.indexOf(keywords) != -1)
							//es6新方法 如果包含返回true 
							if(item.name.includes(keywords)){
								return item;
							}
							
						})
						return newlist;
					},
					show(){
						console.log('执行了show方法');
					}
					
				},
				/* 局部过滤器 */
				filters:{
					dataFormat:(dateStr,pattern)=>{
						var dt = new Date(dateStr);
						var y = dt.getFullYear();
						/* ES6新方法 padStart/padEnd来进行字符串填充 */
						var m = (dt.getMonth() + 1).toString().padStart(2,'0') ;
						var d = dt.getDate().toString().padStart(2,'0');
						/* filter的this指向windows */
						/* console.log(this) */
						
						var hh = dt.getHours();
						var mm = dt.getMinutes();
						var ss = dt.getSeconds();
						return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
					}
				},
				/* 自定义局部指令 【指令名称 和 指令对象】*/
				directives:{
					color:{
						bind(el,binding){
							el.style.color = binding.value;
						}
						
					},
					// 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数
					'font-weight':function(el,binding2){
						el.style.fontWeight = binding2.value;
					},
					'font-size':function(el,binding2){
						el.style.fontSize = binding2.value;
					}
				},
				/* 生命周期函数 */
				beforeCreate(){// 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
				//注意：这时候data和method的数据都还没初始化
				    /* console.log(this.list);
					this.show(); */
				},
				created(){//在 created 中，data 和 methods 都已经被初始化好了！
					/* console.log(this.list);
					this.show(); */
				},
				beforeMount(){//表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
				 // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
				},
				mounted(){//表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
					// console.log(document.getElementById('h3').innerText)
					// 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
					
				},
				beforeUpdate(){
        // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
					console.log('页面上'+document.getElementById(list).innerText);
					console.log(this.list);
				}
			})
		    /*如何定义一个私有的过滤器（局部）  */
			var vm2 = new Vue({
				el:'#app2',
				data:{
					time: new Date()
					},
				methods:{
					
				},
				filters:{//定义私有过滤器  过滤器有两个条件 【过滤器名车 和 处理函数】
				/* 过滤器调用采用的是就近原则，私有与全局一致时，优先调用私有 */
					dataFormat:function(dateStr,pattern=''){
						var dt = new Date(dateStr);
						var y = dt.getFullYear();
						var m = dt.getMonth() + 1;
						var d = dt.getDate();
						
									
						
						if(pattern.toLowerCase() === 'yyyy-mm-dd'){
							return `${y}-${m}-${d}`;
						}else{
							var hh = dt.getHours();
							var mm = dt.getMinutes();
							var ss = dt.getSeconds();
							return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
						}
					}
				}
				
			})
			
		</script>
	</body>
</html>
